<template>
  <div class="page_user user_info" id="user_info">
    <div class="warp">
      <div class="container">
        <div class="row">
          <!-- 左侧边栏
            <div class="col-12 col-md-3">
              <div class="card_menu">

                <list_menu_user :list_info="list_info"></list_menu_user>
              </div>
            </div>
          -->
          <div class="col-12 col-md-9">
            <div class="card_info pl-2">
              <!-- 个人资料 -->
              <div class="div_info">
                <span> 个人资料 </span>
                <div class="content_msg">
                  <div class="left_msg">
                    <div class="figure_avatar">
                      <span>头像：</span>
                      <b-img class="user_avator"
                             :src="obj.avatar ? $fullUrl(obj.avatar) : '../../../public/img/default.png'" alt=""
                             style="width: 3rem; height: 3rem"/>
                    </div>
                    <div class="nickname">
                      <div>
                        <span>昵称：</span>
                      </div>
                      <div :style="'display:' + display_name + ';'">
												<span style="font-size: 1.2rem; color: var(--color_grey)">
													{{ obj.nickname }}
												</span>
                      </div>
                      <div class="input_nickname" :style="'display:' + display_input + ';'">
                        <input type="text" id="nickname" v-model="form.nickname"
                               :focus="focus_input"/>
                        <div class="btn_save" @click="save_nickname()">
                          保存
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right_msg">
                  <b-button class="Change_password" @click="$router.push('/user/password')">
                    <span>修改密码</span>
                  </b-button>
                  <b-button class="Change_password" v-if="source_table && ($check_action(source_table_check_url,'get') || $check_action(source_table_check_url,'set'))"
                            @click="$router.push(source_table_url)">
                    <span>修改资料</span>
                  </b-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixins/page.js";
//import list_menu_user from "@/components/diy/list_menu_user.vue";

export default {
  mixins: [mixin],
  data() {
    return {
      url_get_obj: "~/api/user/get_obj?",
      query: {
        user_id: this.$store.state.user.user_id
      },
      display_input: "none",
      display_name: "block",
      form: {},
      // 输入聚焦
      focus_input: false,
      list_info: [{
        title: "个人资料",
        url: "/user/info",
        icon: "house-fill",
        selected: true,
      },
        {
          title: "密码修改",
          url: "/user/password",
          icon: "person-fill",
          selected: false,
        },

        {
          title: "收藏",
          url: "/user/collect",
          icon: "heart-fill",
          selected: false,
        },

      ],
      file: null,
      source_table: null,
      source_table_name: null,
      source_table_check_url: "",
      source_table_url: "",
    };
  },
  methods: {
    /**
     * 修改头像
     * @param { Object } files 上传文件对象
     */
    async change_avatar(files) {
      var _this = this;
      var form = new FormData();
      form.append("file", files[0]);
      var res = await this.$post("~/api/user/upload?", form);
      console.log(res)
      if (res.result) {
        var avatar = res.result.url;
        this.$post(
            "~/api/user/set?user_id=" + _this.user.user_id, {
              avatar,
            },
            (res) => {
              this.user.avatar = avatar;
              this.obj.avatar = avatar;
            }
        );
      } else {
        this.$toast(res.error.message);
      }
    },
    /**
     * 跳出修改昵称输入框
     */
    change_nickname() {
      this.display_input = "flex";
      this.display_name = "none";
      this.focus_input = true;
    },
    /**
     * 保存昵称修改
     */
    save_nickname() {
      var user_id = this.user.user_id;
      var nickname = this.form.nickname;
      this.$post(
          "~/api/user/set?user_id=" + user_id, {
            nickname,
          },
          (res) => {
            console.log(res);
            this.focus_input = false;
            this.display_input = "none";
            this.display_name = "block";
            this.user.nickname = nickname;
            this.obj.nickname = nickname;
          }
      );
    },
    get_obj_before(params) {
      params.user_id = this.$store.state.user.user_id;
      return params
    },
    async get_obj_after(json, func) {
      let user_group = this.$store.state.user.user_group;
      var json = await this.$get("~/api/user_group/get_obj?name=" + user_group);
      if (json.result && json.result.obj) {
        if (json.result.obj.source_table) {
          this.source_table = json.result.obj.source_table
          this.source_table_name = user_group
          this.source_table_check_url = "/" + this.source_table + "/view";
          this.source_table_url = this.source_table_check_url + "?user_id=" + this.form.user_id
        }
      }
    }
  },
  components: {
    //list_menu_user,
  },
};
</script>

<style scoped>
.container {
  min-height: 800px;
}

.content_msg {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  /* border-bottom: 1px solid var(--color_default_h);
      margin-right: 5px; */
}

.figure_avatar {
  padding: 5px;
  height: 60px;
  line-height: 60px;
}

.nickname {
  display: flex;
  padding: 5px;
  line-height: 30px;
}

.input_nickname .btn_save {
  width: 4rem;
  text-align: center;
  height: 31px;
  line-height: 31px;
  border: 1px solid var(--color_grey);
  border-radius: 5px;
  margin-right: 4px;
}

.btn_save:hover {
  background-color: var(--color_success);
  border: none;
  color: white;
}

.right_msg {
  margin: auto;
}

.right_msg .change_avatar_box {
  cursor: pointer;
  position: relative;
  display: flex;
  margin-left: 5px;
}

.right_wrap {
  margin: 0 10px;
}

.right_msg .change_avatar_box #input_file {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1000;
  font-size: 0;
}

.change_nickname_box {
  margin-top: 10px;
  cursor: pointer;
  display: flex;
  margin-left: 5px;
}
</style>
